<template>
  <div class="container">
    <base-title base-title="文章评论列表" />
    <baseTable
      :total="commentArticleTotal"
      :data="commentArticleData"
      :structure="commentArticleListSc"
      :form-options="commentArticleSearchForm"
      btn-items="search,reset,export"
      @on-search="onSearch"
      @on-reset="onReset"
      @current-page-change="handleCurrentPageChange"
    >
      <template #operation="{ scope }">
        <el-button type="danger" :icon="Delete" text @click="deleteArticleComment(scope.row.id)">删除</el-button>
      </template>
    </baseTable>
  </div>
</template>

<script lang="ts" name="comment_article" setup>
  import { ref, onBeforeMount, reactive } from 'vue'
  import baseTable from '@/components/base-table/baseTable.vue'
  import { Delete } from '@element-plus/icons-vue'
  import { ElMessageBox } from 'element-plus'
  import { queryArticleCommentList, deleteArticleCommentRequest, searchArticleCommentRequest } from '@/network/api/comment-api'
  import formatUtcTime from '@/utils/formatTime'
  import notification from '@/utils/notification'
  import { commentArticleListSc, commentArticleSearchForm } from '@/components/base-table/config'
  const commentArticleData = ref([]) // 评论列表数据
  const commentArticleTotal = ref<number>(0) // 评论总数
  let searchInfo = reactive({}) // 搜索记录
  const hasSearchParam = ref(false) // 搜索状态记录

  const commentArticlePageInit = async (currentPage: number = 1) => {
    const res = await queryArticleCommentList(currentPage)
    commentArticleData.value = res.result.data
    commentArticleData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
    })
    commentArticleTotal.value = res.result.total
  }
  // 搜索事件处理
  const onSearch = async (formData: any) => {
    hasSearchParam.value = true
    searchInfo = formData
    const res = await searchArticleCommentRequest(formData)
    commentArticleData.value = res.result.data
    commentArticleData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
    })
    commentArticleTotal.value = res.result.total
  }
  // 重置事件处理
  const onReset = async () => {
    hasSearchParam.value = false
    searchInfo = {}
    await commentArticlePageInit()
  }
  onBeforeMount(async () => {
    await commentArticlePageInit()
  })
  const deleteArticleComment = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteArticleCommentRequest(id)
      notification.success(result.msg)
      await commentArticlePageInit()
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    if (hasSearchParam.value) {
      const res = await searchArticleCommentRequest(searchInfo, currentPage)
      commentArticleData.value = res.result.data
      commentArticleData.value.forEach((item: any) => {
        item.createAt = formatUtcTime(item.createAt)
        item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
      })
      commentArticleTotal.value = res.result.total
    } else {
      await commentArticlePageInit(currentPage)
    }
  }
</script>

<style scoped></style>
